<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addApprovalMeetingRoomForm" ref="addApprovalMeetingRoomRef" :rules="addApprovalMeetingRoomrules">
            <el-form-item label="实验室名称" :label-width="130" prop="name">
                <el-input v-model="addApprovalMeetingRoomForm.name" autocomplete="off" ref="name"
                    placeholder="请填写实验室名称"></el-input>
            </el-form-item>
            <el-form-item label="实验室容纳人数" :label-width="130" prop="capacity">
                <el-input v-model="addApprovalMeetingRoomForm.capacity" autocomplete="off" ref="name"
                    placeholder="请填写实验室容纳人数"></el-input>
            </el-form-item>
            <el-form-item label="实验室位置" :label-width="130" prop="location">
                <el-input v-model="addApprovalMeetingRoomForm.location" autocomplete="off" ref="name"
                    placeholder="请填写实验室位置"></el-input>
            </el-form-item>
            <el-form-item label="实验室学科" :label-width="130" prop="description">
                <!-- <el-input v-model="addApprovalMeetingRoomForm.description" autocomplete="off" ref="name"
                    placeholder="请选择实验室学科"></el-input> -->
                <el-select v-model="addApprovalMeetingRoomForm.description" class="m-2" placeholder="请选择实验室学科">
                    <el-option v-for="item in descriptionType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalMeetingRoom",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addApprovalMeetingRoomForm: {
                name: "",
                capacity: "",
                location: "",
                description: "",
            },
            // 校验规则
            addApprovalMeetingRoomrules: {
                name: vxRule(true, null, "blur"),
                capacity: vxRule(true, null, "blur"),
                location: vxRule(true, null, "blur"),
                description: vxRule(true, null, "blur"),
            },
            description: '',
            descriptionType: [
                {
                    value: '物理',
                    label: '物理',
                },
                {
                    value: '化学',
                    label: '化学',
                },
                {
                    value: '生物',
                    label: '生物',
                }],
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getApprovalMeetingRoomById(id) {
            httpService("/javaApi/approvalMeetingRoom/queryById", { id: id }, "get").then(
                (data) => {
                    // console.log(data);
                    this.addApprovalMeetingRoomForm = data;
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addApprovalMeetingRoomForm.id = "";
            this.addApprovalMeetingRoomForm.name = "";
            this.addApprovalMeetingRoomForm.capacity = "";
            this.addApprovalMeetingRoomForm.location = "";
            this.addApprovalMeetingRoomForm.description = "";
            // this.description = ''
        },
        save() {
            console.log(this.addApprovalMeetingRoomForm.id);
            this.$refs.addApprovalMeetingRoomRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("name", this.addApprovalMeetingRoomForm.name);
                    params.append("capacity", this.addApprovalMeetingRoomForm.capacity);
                    params.append("location", this.addApprovalMeetingRoomForm.location);
                    params.append("description", this.addApprovalMeetingRoomForm.description);
                    if (this.addApprovalMeetingRoomForm.id) {
                        params.append("id", this.addApprovalMeetingRoomForm.id);
                        httpService("/javaApi/approvalMeetingRoom/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getApprovalMeetingRoomList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/approvalMeetingRoom/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getApprovalMeetingRoomList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped>

</style>